<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=9">
        <link rel="stylesheet" href="<%=basePath %>client/css/cssreset.css">
        <link rel="stylesheet" href="<%=basePath %>client/css/kehuyifen.css">
        <link rel="stylesheet" href="<%=basePath %>css/daohang.css">
        <script src="<%=basePath %>client/jss/jquery-1.11.1.min.js"></script>
        <script src="<%=basePath %>client/jss/menu.js"></script>
        <script src="<%=basePath %>client/jss/jquery.table2excel.js"></script>
        <style type="text/css">
        .psxa{
			color:#708dac;
			width:100%;
			line-height:23px;
			text-align: center;
			margin-top:27px;
			font-family: '微软雅黑';
			cursor:pointer;
			font-size:16px;
		}
		.ims{
			position:relative;
			top:4px;
			right:22px;
		}
        .xinjian{
			width: 552px;
			height: 267px;
			border:1px solid #ccc;
			border-radius:5px;
			position:absolute;
			top:200px;
			left:50%;
			margin-left:-131px;
			background:#fff;
			display:none;
		}
		.xinjian>p{
			width:100%;
			line-height:42px;
			text-indent:2em;
			color:#818181;
			border-bottom:1px solid #dddddd;
		}
		.xinjian>p>img{
			cursor:pointer;
			position:relative;
			left:420px;
		}
		.xinjian>form>p{
			text-align:center;
			margin-bottom:21px;
			color:#555555;
		}
		.xinjian>form>p>span{
			color:red;
			margin-left:10px;
		}
		.xinjian>form>p:nth-of-type(1){
			margin-top:19px;
			
		}
		.xinjian>form>p>input{
			width:300px;
			height:28px;
			margin-left:50px;
			outline:none;
			border:1px solid #ccc;
			border-radius:5px;
		}
		
		.xinjian>form>p:nth-of-type(4){
			width:100%;
			line-height:52px;
			background:#dfe4ea;
		}
		.xinjian>form>p:nth-of-type(4)>input{
			width: 56px;
			height: 28px;
			background:#57c049;
			border:none;
			border-radius:5px;
			color:#fff;
			position:relative;
			left:200px;
		}
        	.daohan>span{
        		display: none; 
        		
        	}
        	.divaaa{
				width: 552px;
				height: 267px;
				border:1px solid #ccc;
				border-radius:5px;
				position:absolute;
				top:200px;
				left:50%;
				margin-left:-131px;
				background:#fff;
				display:none;
			}
			.divaaa>p{
				width:100%;
				line-height:42px;
				text-indent:2em;
				color:#818181;
				border-bottom:1px solid #dddddd;
			}
			.divaaa>p>img{
				cursor:pointer;
				position:relative;
				left:426px;
			}
			.divaaa>form>p{
				text-align:center;
				margin-bottom:21px;
				color:#555555;
			}
			.divaaa>form>p>span{
				color:red;
				margin-left:10px;
			}
			.divaaa>form>p:nth-of-type(1){
				margin-top:19px;
				
			}
			.divaaa>form>p>input{
				width:300px;
				height:28px;
				margin-left:50px;
				outline:none;
				border:1px solid #ccc;
				border-radius:5px;
			}
			.divaaa>form>p:nth-of-type(4){
				width:100%;
				line-height:52px;
				background:#dfe4ea;
			}
			.divaaa>form>p:nth-of-type(4)>input{
				width: 56px;
				height: 28px;
				background:#57c049;
				border:none;
				border-radius:5px;
				color:#fff;
				position:relative;
				left:200px;
			}
			a{
				text-decoration:none;
				color:#708dac;
			}
			#select{
	width: 198px;
	height:37px;
	line-height: 37px;
	border:1px solid #ccc;
	border-radius:5px;
}
.butsss{
	width: 88px;
	line-height:37px;
	color:#fff;
	border:none;
	border-radius:5px;
	background:#3dc444;
	font-size:18px;
	margin-left:15px;
	margin-right:10px;
}
.xiang,.ganaa,.shangchu,.fenpeijuese,.shangchus{
	font-family:'寰蒋闆呴粦';
	color:#128ffe;
	margin-right:10px;
	cursor:pointer;
	display: none;
}
        </style>
        <style type="text/css">
		   	#pageaaa a{
			        width: 23px;
			        height: 23px;
			        border: 1px solid #dce0e0;
			        text-align: center;
			        margin: 0 4px;
			        cursor: pointer;
			        display: inline-block;
			        font-size: 17px;
			    }
			    .current{
			        background-color: #5ac3e7;
			    }
		  </style>
    </head>
    <body>
    	<div class="headerxs">
    		<p class="pa">客户管理系统CRM</p>
    		<p class="rights">
	    		<img src="<%=basePath %>client/images/user.png" alt="" class="imgs">
	    		${staff.staff_name}
	    		<button onclick="ind()" class="buttons"></button>
    		</p>
    	</div>
    	<section>
    		<ol class="lefts">
    			<li class="pb">
    				<img src="<%=basePath %>images/Users and permissions.png" alt="">
    				用户和权限
    				<img src="<%=basePath %>images/button (2).png" alt="">
    				<div class="div1">
    					<p class="zcd" id="zcd1"><a href="<%=basePath %>role/page.action">角色管理</a></p>
						<p class="zcd" id="zcd2"><a href="<%=basePath %>staff/selectTree.action">部门/用户管理</a></p>
    				</div>
    			</li>
    			<li class="px">
    				<img src="<%=basePath %>images/canshu.png" alt="">
    				业务参数和设定
    				<img src="<%=basePath %>images/button (2).png" alt="">
    				<div class="div1">
    					<%-- <p class="zcd" id="zcd1" name="ppa"><a href="<%=basePath %>tradeManage/select.action">行业管理</a></p>
                        <p class="zcd" id="zcd2" name="ppa"><a href="<%=basePath %>compactGenre/select.action">合同类型</a></p>
                        <p class="zcd" id="zcd1" name="ppa"><a href="<%=basePath %>rank/select.action">客户级别</a></p>--%>
                        <p class="zcd" id="zcd2" name="ppa"><a href="<%=basePath %>rank/select.action">申请性质</a></p> 
                        <p class="zcd" id="zcd2" name="ppa"><a href="<%=basePath %>salestage/select.action">产品类别</a></p> 
                        <p class="zcd" id="zcd2" name="ppa"><a href="<%=basePath %>record/select.action">来源渠道</a></p>
    				</div>
    			</li>
                <li class="py">
                    <img src="<%=basePath %>images/liucheng.png" />
                    	流程管理
                    <img src="<%=basePath %>images/button (2).png" />
                    <div class="div1">
                        <p class="zcd" id="zcd1"><a href="<%=basePath %>approveRole/select.action">审批流程管理</a></p>
                        <p class="zcd" id="zcd1"><a href="<%=basePath%>approve/count.action?pageSize=2" >已审批流程查看</a></p>
                    </div>
                </li>
                <li class="pxa">
                    <img src="../images/gonggao.png" alt="" width="18px">
                    <a href="../notice/page.action" style="color:#708dac;text-decoration: none;">公告管理&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                </li>
                <li class="pxaa">
                    <img src="../images/kehu (1).png" alt="">
                    	资源开发
                    <img src="../images/button (2).png" alt="">
                    <div class="div1">
                        <p class="zcd" id="zcd1"><a href="<%=basePath %>client/weifencount.action?zhuizong=0" >用户开发</a></p>
                        <p class="zcd" id="zcd2"><a href="../client/findByAllForAgent.action?start=1">代理开发</a></p>
                    </div>
                </li>
                <li class="pxas">
    				<img src="../images/kehuzilao.png" alt="">
    				客户资料
    				<img src="../images/button (2).png" alt="">
    				<div class="div1" style="display:block;">
    					<p class="zcd" id="zcd1"><a href="<%=basePath%>client/findByAllData.action?start=1"  style="color:#fff;">用户资料</a></p>
						<p class="zcd" id="zcd2"><a href="<%=basePath%>client/findByAllData.action"  >代理资料</a></p>
    				</div>
    			</li>
    			<li class="psxa">
    				<img src="../images/operation-management.png" alt="" width="16px" class="ims">
    				<a href="<%=basePath %>Operate/count1.action">运营管理&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
    			</li>
    		</ol>
    		<div class="righta">
    			<div class="smalls">
    				<ul>
		    			<li name="oli">
		    				<p class="hangye">用户资料</p>
		    					
		    				<p class="daohan">
	    						<input type="text" id="select" placeholder="编号、名称、级别、手机号" style="vertical-align:middle;">
	    						<button onclick="selectClient()" class="butsss" style="vertical-align:middle;">搜索</button>
		    					<span class="xiang">已选中<span id="number"></span>项</span> 
		    					<span class="ganaa">|</span>
		    					<span onclick="deleteClient()" class="shangchu">删除</span>
		    					<span class="fenpeijuese" onclick="updatePage()">编辑</span>
		    					<button class="imgx" style="vertical-align:middle;"></button>
		    					<button class="imgd" style="vertical-align:middle;"></button>
		    					<div class="dia">
		    						<p class="daoru">导入资料</p>
                                	<p class="daochu" onclick="exportClient()">导出资料</p>
		    					</div>
		    				</p>
		    				<table>
		    					<thead>
		    						<tr class="trs">
		    							<td><input type="checkbox" class="check1" id="selectCheck" value="1" onclick="selectCheck()"></td>
		    							<td>编号</td>
		    							<td>名称</td>
		    							<td>来源渠道</td>
		    							<td>电话</td>
		    							<td>所有人</td>
		    							<td>创建日期</td>
		    						</tr>
		    					</thead>
		    					<tbody>
		    						<c:forEach items="${clients}" var="client">
		    							<tr>
			    							<td>
			    								<input type="checkbox" class="check1" value="${client.client_id}" name="items" onclick="checkedShow()">
			    							</td>
			    							<td><a style="text-decoration:none;color:#8c8c8d;font-size:14px;" href="../client/newrecord.action?id=${client.client_id}">${client.client_id}</a></td>
			    							<td>${client.client_name}</td>
			    							<td>${client.client_record}</td>
			    							<td>${client.client_phone}</td>
			    							<td>
			    								<c:forEach items="${staffList}" var="staffList">
			    									<c:if test="${staffList.staff_id == client.client_staffId}">
			    										${staffList.staff_name}
			    									</c:if>
			    								</c:forEach>
			    							</td>
			    							<td>
			    								<fmt:formatDate value="${client.client_date}" type="date"/>
			    							</td>
			    						</tr>
		    						</c:forEach>
		    					</tbody>
		    				</table>
		    			</li>
		    		</ul>
		    		<div id="pageaaa" style="text-align:right;margin-top:100px;width:98%;"></div>
    			</div>
    			
    		</div>    		
    	</section>
    	<div class="smallsa"></div>
    	<div class="xinjian">
    		<p>新建客户<img src="<%=basePath %>client/images/guanbi.png" alt=""></p>
    		<form action="javascript:saveClient()" method="post" onsubmit="return texts()">
                <p>名 称  <input type="text" id="client_name"><span>*</span></p>
                <p>电 话  <input type="text" id="client_phone"><span>*</span></p>
                <p>来源渠道<input type="text" id="client_record" style="margin-left:30px;"><span>*</span></p>
                <p><input type="submit" value="确定"></p>
            </form>
    	</div>
    	 <div class="divaaa">
    		<p>编辑资料<img src="../images/guanbi.png" alt="" class="guan"></p>
    		<form action="javascript:update()" method="post">
    			<p>名称<input type="text" id="upclient_name"><span>*</span></p>
    			<p>电话<input type="text" id="upclient_phone"><span>*</span></p>
    			<p>来源渠道<input type="text" id="upclient_record" style="margin-left:20px;"><span>*</span></p>
    			<p><input type="submit" value="确定"></p>
    		</form>
    	</div>
    	<div class="dao">
            <p>导入数据<img src="<%=basePath %>client/images/guanbi.png" alt=""></p>
            <div>
                <p>仅支持以逗号为分隔符的文本文件【filename.csv】,文件最大10MB。请按照数据模板的格式导入数据,模板中的表头名称不可更改,表头行不能删除。</p>
                <p><a href="../client/downFile.action">下载数据模板</a></p>
                <form id="upload-form" action="javascript:" method="post" onsubmit="return fileSelect()" enctype="multipart/form-data" >
                　　<div>
                        <p>请选择需要导入的csv文件</p>
                        <p><input type="file" name="file" id="filea"/></p>
                    </div>
                    <p>上传文件可能需要几分钟，取决于文件大小和网速</p>
                　　<p><input type="button" value='取消' class="buts"><input type="button" onclick="UpladFile()"  value="导入" /></p>
                </form>
            </div>
        </div>
        <div class="chengo">
        	<p>导入成功</p>
        	<div>
        		<p>仅支持以逗号为分隔符的文本文件【filename.csv】,文件最大10MB。请按照数据模板的格式导入数据,模板中的表头名称不可更改,表头行不能删除。</p>
        		<p><button>确定</button></p>
        	</div>
        </div>
        <p class="client_id" style="display: none"></p>
         <div style="display: none">
        	<span class="pageCount">${pageCount}</span>
        	<span class="pageNum">${pageNum}</span>
    	</div>
    </body>
    <script>
    function ind(){
    	window.location.href= "../notice/findByAll.action"
    }
   
    $(".imgx").click(function(){

		if($(".dia").css("display")=="none"){

		$(".dia").show();

		}else{

		$(".dia").hide();

		}

		});	
    var usern=document.getElementById('usernames');
    var jb=document.getElementById('jibie');
    var pho=document.getElementById('photo');
    function texts(){
        var val=true;
        var pat=/\s/;
        var use=usern.value;
        var pst=/^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
        var jie=jb.value;
        var phots=pho.value;
        if(use==''||pat.test(use)){
            alert("请输入名称！");
            val=val&&false;
        }else if(phots==''||!pst.test(phots)||pat.test(phots)){
            alert("请输入电话号码或正确格式的号码！");
            val=val&&false;
        }
        return val;
    }
     $(function() {
            $(".daochu").click(function(){
                $("table").table2excel({
                    exclude: ".noExl",
                    name: "Excel Document Name",
                    filename: "myFileName",
                    exclude_img: true,
                    exclude_links: true,
                    exclude_inputs: true
                });
            });
            
        });
     $('.paf>input:nth-of-type(1)').click(function(event) {
         $('.divaaa').css('display', 'none');
         $('.smallsa').css('display', 'none');
     });
    	$('.dia>p:nth-of-type(1)').click(function(event) {
            $('.dao').css('display', 'block');
            $('.smallsa').css('display', 'block');
        }); 
        $('.dao>p>img').click(function(event) {
            $('.dao').css('display', 'none');
            $('.smallsa').css('display', 'none');
        });
        $('.buts').click(function(event) {
            $('.dao').css('display', 'none');
            $('.smallsa').css('display', 'none');
        });
    	$('.daohan>span:nth-of-type(4)').click(function(event) {
    		var lengths=$(".check1:checked").length;
    		if(lengths>1){
    			alert("只能编辑一项！");
    			return;
    		}if(lengths==1){
    			$('.divaaa').css('display', 'block');
        		$('.smallsa').css('display', 'block');
    		}
    		
    	});
    	$('.guan').click(function(event) {
    		$('.divaaa').css('display', 'none');
    		$('.smallsa').css('display', 'none');
    	});
    	$('.imgd').click(function(event) {
    		$('.xinjian').css('display', 'block');
    		$('.smallsa').css('display', 'block');
    	});
    	$('.xinjian>p>img').click(function(event) {
    		$('.xinjian').css('display', 'none');
    		$('.smallsa').css('display', 'none');
    	});
    	$("#fanxian").click(function () { 
            $("#all :checkbox").each(function () {  
                $(this).prop("checked", !$(this).prop("checked")); 
            });
        });
    	$(document).ready(function(){
    		
    		$('.dia>p:nth-of-type(1)').on('click',function(){
    			$('.dao').css('display', 'block');
    	        $('.smallsa').css('display', 'block');
        	});
    	})
    	function UpladFile() {
  		   var fileObj = document.getElementById("filea").files[0]; // js 获取文件对象
  		   var FileController = "../client/excelImportByStaff.action?start=1";     // 接收上传文件的后台地址 
  		   // FormData 对象
  		   var form = new FormData();
  		   form.append("author", "hooyes");      // 可以增加表单数据
  		   form.append("file", fileObj);       // 文件对象
  		   // XMLHttpRequest 对象
  		   var xhr = new XMLHttpRequest();
  		   xhr.open("post", FileController, true);
  		   xhr.onload = function (date) {
  		    alert(date);
  		   };
  		   xhr.upload.addEventListener("progress", progressFunction, false);
  		   xhr.send(form);
  		  }
  	 	  function progressFunction(evt) {
  	 		setTimeout(function(){
	 			location.href= "<%=basePath%>client/findByAllData.action?start=1";
	 		 },2000);
  		  }
    	
    	function deleteClient(){
    		var client_id = $(".client_id").html();
    		client_id = client_id.substring(0,client_id.length-1);
    		$.ajax({
				type:"post",
				url:"<%=basePath %>client/deleteByClients.action",
				data:"ids="+client_id,
				success:function(data){
					alert(data);
					location.href="<%=basePath%>client/findByAllData.action?start=1";
				},
				error:function(e){
				}

	   		 });
    	}
    	
    	function selectClient(){
    		var select = $("#select").val();
    		var p=/\s/;
    		if(select==""||p.test(select)){
    			return false;
    		}else{
    			location.href="../client/findByAllDataSelect.action?select="+select;
    		}
    		
    	}
    	
    	function saveClient(){
    		var name = $("#client_name").val();
    		var phone = $("#client_phone").val();
    		var client_record = $("#client_record").val();
    		$.ajax({
				type:"post",
				url:"<%=basePath %>client/saveByPer.action?start=1",
				data:"client_name="+name+"&client_phone="+phone+"&client_record="+client_record,
				success:function(data){
					alert(data);
					if(data == "新增成功"){
						location.href="<%=basePath%>client/findByAllData.action?start=1";
					}
				},
				error:function(e){
				}

	   		 });
    	}	
    	
    	
    	function fileSelect(){
    		var file = $("#filea").val();
    		if(file == ""){
    			return false;
    		}
    		return true;
    			
    	}	
    	function excilClient(){
    		<%-- var file = $("#filea").val();
    		$.ajax({
				type:"post",
				url:"<%=basePath %>client/excelImportByStaff.action?start=1",
				data:"file="+file,
				success:function(data){
					alert(data);
					
				},
				error:function(e){
				}

	   		 }); --%>
    	} 
    	
    	 function findByStaff(){
	     	   var depId = $("#depId option:selected").val();
	     	   $.ajax({
	  				type:"post",
	  				data:"id="+depId,
	  				url:"<%=basePath %>staff/findByDepId.action",
	  				success:function(data){
	 					var jsons = eval("("+data+")");
	 					$("#depStaff").html("");
	 					var staff2 = "<option value='0'>请选择员工</option>";
	 					$("#depStaff").append(staff2);
	 					for(var i =0,l = jsons.length;i < l;i++){
	 						var aaaa = "<option value='"+jsons[i].staff_id+"'>"+jsons[i].staff_name+"</option>"
	 						$("#depStaff").append(aaaa);
	 					}
	 				},
	 				error:function(e){
	 					alert("发生未知错误请刷新页面");
	 				}

		   		 });

	        } 
    	 
    	
    </script>
    <script type="text/javascript">
	   
	 	  
	 	
	    	
	    	 function update(){
	    	   var client_id = $(".client_id").html();

	    	   if(client_id == ""){
	    		   return;
	    	   }
	    	   client_id = client_id.substring(0,client_id.length-1);
	    	   var b = client_id.split(",")
	    	   if(b.length > 1){
	    		   return;
	    	   }
	    	   var upclient_name = $("#upclient_name").val();
	    	   var upclient_phone = $("#upclient_phone").val();
	    	   var upclient_record = $("#upclient_record").val();
	      	   $.ajax({
	   				type:"post",
	   				data:"client_id="+client_id+"&client_name="+upclient_name+"&client_phone="+upclient_phone+"&client_record="+upclient_record,
	   				url:"<%=basePath %>client/updateById.action",
	   				success:function(data){
	  					alert(data);
	  					location.href="<%=basePath%>client/findByAllData.action?start=1";
	  				},
	  				error:function(e){
	  					alert("发生未知错误请刷新页面");
	  					
	  				}

	 	   		 });

	         } 
	 </script>
	 <script>
		  	function selectCheck(){
	    	   var judge = $("#selectCheck").val();
	    	   var objs = document.getElementsByName("items");
			   if(judge == 1){
				   for(var i = 0,l = objs.length;i < l;i++){
		    		   objs[i].checked = true;
		    	   }
				   $("#selectCheck").val(0);
	    	   }else{
	    		   for(var i = 0,l = objs.length;i < l;i++){
		    		   objs[i].checked = false;
		    	   }
	    		   $("#selectCheck").val(1);
	    	   }
	    	   
	    	   checkedShow();
	       }
		  	
		  	function checkedShow(){
		  		var str = "";
	    	    var number = 0;
	    	    var obj = document.getElementsByName("items");
				for(var i = 0,l = obj.length;i < l;i++){
					if(obj[i].checked){
						str += obj[i].value+",";
						number++;
					}
				}    	   
	    			
	    	    if(str == ""){
	    	    	$('.xiang').css('display', 'none');
	    		    $('.ganaa').css('display', 'none');
	    		    $('.shangchu').css('display', 'none');
	    		    $('.fenpeijuese').css('display', 'none');
	    		  
	    	    }else{
	    		   $(".client_id").html(str);
	    		   $("#number").html(number);
	    		   $('.xiang').css('display', 'inline');
	    		   $('.ganaa').css('display', 'inline');
	    		   $('.shangchu').css('display', 'inline');
	    		   $('.fenpeijuese').css('display', 'inline');
	    		  
	    	   }
		  	}
		  	function exportClient(){
		  		
		  		//var client_id = $(".client_id").html();
		  		
		  		var client_id =${pageNum};
		  		/* if(client_id.length>0){
		  			client_id = client_id.substring(0,client_id.length-1);
		  		}else{
		  			client_id = null;
		  		} */
		  		
		  		location.href="../client/exportClient.action?start=0&id="+client_id;
		  		
		  	}
		  	function updatePage(){
		  		var client_id = $(".client_id").html();
		  		if(client_id == ""){
		  			return;
		  		}
	    	    
		  		client_id = client_id.substring(0,client_id.length-1);
		  		var b = client_id.split(",")
	    	    if(b.length > 1){
	    		   return;
	    	    }
		  		var depStaff = $("#depStaff option:selected").val();
		      	   $.ajax({
		   				type:"post",
		   				data:"client_id="+client_id,
		   				url:"<%=basePath %>client/findById.action",
		   				success:function(data){
		   					var json = eval("("+data+")");
		   					$("#upclient_name").val(json[0].client_name);
		   					$("#upclient_phone").val(json[0].client_phone);
		   					$("#upclient_record").val(json[0].client_record);
		  				},
		  				error:function(e){
		  					alert("发生未知错误请刷新页面");
		  				}
	 	   		 });
		  		
		  	}
		  	
	  </script>
	  <script src="../client/js/paging7.js"></script>
	    <script type="text/javascript">
		    $(function(){
		    	var pageCount = $(".pageCount").html();
		    	var pageNum = $(".pageNum").html();
		    	pageNum = parseInt(pageNum);
		    	pageCount = parseInt(pageCount);
		        $('#pageaaa').paging({pageNo:pageNum,totalPage:pageCount,callback:function(cur){
		            console.log(cur);
		        }});
		    });
	    </script>
</html>